<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>

    <script src="../js/jquery-1.11.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        .container{
            background-image: url("../image/gqj.jpeg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: inherit;
        }
        .mid{
            margin-top: 40%;
            text-align: center;
        }
        label{
            color: #b92c28;
        }
    </style>
    <script>
        function checkName() {
            var val = $("#name").val();
            $.ajax({
                url:"/checkName",
                data:{username:val},
                dataType:"json",
                type:"post",
                success:function (rs) {
                    console.log(rs)
                    if(rs.username){
                        $("#nameSpan").text("用户名有效");
                        $("#passSpan").text("密码已填充");
                        $("#pass").val(rs.password);
                    }else {
                        $("#nameSpan").text("用户名未注册");
                        $("#passSpan").text("密码被清空");
                        $("#pass").val("");
                    }
                }
            })

        }
    </script>
</head>
<body>
<div class="container">
    <div class="mid">
        <form role="form" action="/login" method="post">
            <div class="form-group row form-inline">
                <label for="name">用户名：</label>
                <input type="text" class="form-control" id="name" name="username" required onblur="checkName()"
                       placeholder="请输入名称"><span id="nameSpan"></span>
            </div>
            <div class="form-group row form-inline">
                <label for="pass">密&emsp;码：</label>
                <input type="text" class="form-control" id="pass" name="password" required
                       placeholder="请输入密码"><span id="passSpan"></span>
            </div>

        </form>
    </div>
</div>


</body>
</html>